<template>
  <div class="container" ref="container"
       :style="[{width:this.width},{height:this.height}]">
  </div>
</template>

<script>
export default {
  name: "Chart",
  data() {
    return{
      chart: {}
    }
  },
  props:{
    options: {
      type: Object,
      required: true,
    },
    mapName: {
      type: String,
      required: false,
      default: ''
    },
    geoJson: {
      type: Object,
      required: false,
    },
    width: {
      type: String,
      default: '1000px'
    },
    height: {
      type: String,
      default: '500px'
    },
    bgColor: {
      type: String,
      default: '#fff'
    }
  },
  mounted() {
      this.chart = this.$echarts.init(this.$refs['container'])
      this.$echarts.registerMap(this.mapName, this.geoJson);
      this.chart.setOption(this.options)
  }
}
</script>

<style scoped>

</style>
